<template>
    <div>
        <el-dialog
            :title="this.$t('AddressManagementLang.account_configuration')"
            :visible.sync="Visible"
            width="100%"
            fullscreen
            ref="coSourcing_box"
            :close-on-click-modal="false"
            @close="cancel"
        >
            <div class="midContant clearfix">
              <div class="dialogBox top">
                    <div class="dialogBoxItem">
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('AddressManagementLang.address_code') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    disabled
                                    v-model="data.code"
                                ></el-input>
                            </div>
                        </div>
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('AddressManagementLang.Address_type') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    disabled
                                    v-model="data.type_name"
                                ></el-input>
                            </div>
                        </div>
                        <div class="dialogBoxItemRow">
                            <div class="title">
                                <div class="RequiredRowTip">*</div>
                                {{ $t('AddressManagementLang.address_name') }}:
                            </div>
                            <div class="contant">
                                <el-input
                                    disabled
                                    v-model="data.name_current"
                                ></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="display: flex; height: calc(100% - 60px)">
                    <div style="position: relative" :style="{ width: level_1_width + 'px',height:'100%' }">
                        <div style="display: flex;">
                            <div class="headerBox">{{$t('AddressManagementLang.accounts_list')}}</div>
                            <FilterBox
                                style="flex: 1;"
                                :labelWidth="120"
                                :buttonGroupArr="['search','clear']"
                                :filterItemList="filterItemList_level_1"
                                :filterData="filterData_level_1"
                                @search="search_level_1"
                                @clear="clear_level_1"
                            >
                            </FilterBox>
                        </div>
                        <MyTable
                            ref="AddressManagement_configure_table_level_1"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true,reserve:true},rowConfig:{isCurrent: true, isHover: true,keyField:'id'}
                            }"
                            :tableColumn="tableColumn_level_1"
                            :tableData="tableData_level_1"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_1"
                        >
                            <template v-slot:content="scope">
                                <span>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :OnceHasNummerAll="true"
                          :isShow="false"
                          :number_all="tableData_level_1.length"
                        >
                        </Pagination>
                    </div>
                    <div :style="{ width: SeekBar_width + 'px' }" class="SeekBar" @mousedown="sum_block_ON_1"></div>
                    <div :style="{ width: level_2_width > 0 ? level_2_width + 'px' : 'unset', flex: level_2_width > 0 ? 'unset' : 1,height:'100%' }">
                      <div style="display: flex;">
                            <div class="headerBox">{{$t('AddressManagementLang.customer_list')}}</div>
                            <FilterBox
                                style="flex: 1;"
                                :labelWidth="120"
                                :buttonGroupArr="['search','clear']"
                                :filterItemList="filterItemList_level_2"
                                :filterData="filterData_level_2"
                                @search="search_level_2"
                                @clear="clear_level_2"
                            >
                            </FilterBox>
                        </div>
                        <MyTable
                            ref="AddressManagement_configure_table_level_2"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true,reserve:true},rowConfig:{isCurrent: true, isHover: true,keyField:'id'}
                            }"
                            :tableColumn="tableColumn_level_2"
                            :tableData="tableData_level_2"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_2"
                        >
                            <template v-slot:content="scope">
                                <span>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :OnceHasNummerAll="true"
                          :isShow="false"
                          :number_all="tableData_level_2.length"
                        >
                        </Pagination>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm" size="small"
                >{{$t('common.confirm')}}</el-button
                >
                <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
            </span>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        // 接收绑定参数
        midHight: [Number, String]
    },
    data() {
        return {
            Visible: false,
            address:'',
            data: {
                code: '',
                type_name: '',
                name_current: '',
            },
            filterItemList_level_1:[
                // input输入框
                { label:this.$t('SubAccountManagementLang.Account_name'),width:200, filterKey: 'keyword', filterType: 'SearchInput', placeholderStr: null },
            ],
            filterData_level_1:{
                keyword: "",
                limit:-1,
            },
            filterItemList_level_2:[
                // input输入框
                { label:this.$t('CustomerManagementLang.Name'),width:200, filterKey: 'keyword', filterType: 'SearchInput', placeholderStr: null },
            ],
            filterData_level_2:{
                keyword: "",
                limit:-1,
            },
            tableColumn_level_1: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('SubAccountManagementLang.Account_name'),
                    prop: "name",
                    width: 160,
                    order:"",
                },

                {
                    checked: true,
                    label: this.$t('SubAccountManagementLang.Telephone'),
                    prop: "mobile",
                    width: 120,
                    order:"",
                },
                {
                    checked: true,
                    label: this.$t('SubAccountManagementLang.mailbox'),
                    prop: "email",
                    width: 200,
                    order:"",
                },
                {
                    checked: true,
                    label: this.$t('SubAccountManagementLang.Belonging_role'),
                    prop: "role",
                    width: 140,
                    order:"",
                },
            ],
            tableData_level_1: [],
            sendDataArr_level_1: [],
            tableColumn_level_2: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('CustomerManagementLang.Name'),
                    prop: "name",
                    width: 160,
                    order:"",
                },
                {
                    checked: true,
                    label: this.$t('CustomerManagementLang.code'),
                    prop: "nickname",
                    width: 160,
                    order:"",
                },
                {
                    checked: true,
                    label: this.$t('CustomerManagementLang.Telephone'),
                    prop: "mobile",
                    width: 120,
                    order:"",
                },
                {
                    checked: true,
                    label: this.$t('CustomerManagementLang.email'),
                    prop: "email",
                    width: 160,
                    order:"",
                },
                {
                    checked: true,
                    label: this.$t('ExpressOrderManagementLang.sale'),
                    prop: "belong_sale",
                    width: 80,
                    order:"",
                },
            ],
            tableData_level_2: [],
            sendDataArr_level_2: [],
            rightWidth: 35, //右侧空白宽度
            level_1_width: 300, //默认宽度
            level_2_width: 300, //默认宽度
            level_min_width: 300, //数据组最小宽度
            SeekBar_width: 4, //拖动条宽度
            confirmTrue: true, //确定按钮保护
        };
    },
    created() {},
    mounted() {},
    deactivated() {},
    watch: {},
    methods: {
       
        init(data) {
            console.log(data)
            //监听盒子变化
            this.setWidth();
            window.addEventListener('resize', this.setWidth);
            window.addEventListener('mouseup', this.sum_block_NO);
            this.Visible = true;
            this.address=data.id
            this.data.code=data.code
            this.data.type_name=data.type_name
            this.data.name_current=data.name_current
            this.getData()
        },
        //获取单条
        getData() {
            this.$get("getAddressAuthMemberId", {address:this.address}).then((res) => {
                this.currentSelectData=res.data
                this.getTableData_level_1(true)
                this.getTableData_level_2(true)
            });
        },
        search_level_1(){
            this.getTableData_level_1()
        },
        clear_level_1(){
            this.filterData_level_1.keyword= "",
            this.getTableData_level_1()
        },
        search_level_2(){
            this.getTableData_level_2()
        },
        clear_level_2(){
            this.filterData_level_2.keyword= "",
            this.getTableData_level_2()
        },
        getTableData_level_1(isOne=false) {
            this.$get('childMembers',this.filterData_level_1).then((res) => {
                this.tableData_level_1 = res.data;
                if(isOne){
                    if(this.tableData_level_1.length>0){
                        this.tableData_level_1.forEach(item=>{
                            let type=this.currentSelectData.childMembers.findIndex(el=>{return el.uid==item.uid})!=-1
                            if(type){
                                this.$refs.AddressManagement_configure_table_level_1.$refs.tableRef.setCheckboxRow(item,true);
                            }
                        })
                        this.sendDataArr_level_1=this.tableData_level_1.filter(item=>{return item.checked})
                    }
                }
            });
        },
        getTableData_level_2(isOne=false) {
            this.$get('sonMembers',this.filterData_level_2).then((res) => {
                this.tableData_level_2 = res.data;
                if(isOne){
                    if(this.tableData_level_2.length>0){
                        this.tableData_level_2.forEach(item=>{
                            let type=this.currentSelectData.sonMembers.findIndex(el=>{return el.uid==item.uid})!=-1
                            if(type){
                                this.$refs.AddressManagement_configure_table_level_2.$refs.tableRef.setCheckboxRow(item,true);
                            }
                        })
                        this.sendDataArr_level_2=this.tableData_level_2.filter(item=>{return item.checked})
                    }
                }
            });
        },
        setWidth() {
            this.$nextTick(()=>{
              let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
              if(!this.$refs.coSourcing_box){
                return
              }
            if (windowWidth > 630) {
              this.$refs.coSourcing_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = 'unset';
                this.level_1_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2, //默认宽度
                this.level_2_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2;
            } else {
                this.$refs.coSourcing_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = '610px';
                this.level_1_width = 300, //默认宽度
                    this.level_2_width = 300; //默认宽度
            }
            })
        },
        sum_block_ok_1(e) {
            let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (e.clientX < this.level_min_width + this.rightWidth) {
                this.level_1_width = this.level_min_width;
            } else if (e.clientX > windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth) {
                this.level_1_width = windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth;
            } else {
                this.level_1_width = e.clientX - this.rightWidth;
            }
            this.level_2_width = windowWidth - this.SeekBar_width - this.level_1_width - this.rightWidth * 2;
        },
        sum_block_ON_1(e) {
            window.addEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'none'; //禁止选中文字
        },
        sum_block_NO() {
            window.removeEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'unset'; //取消禁止选中文字
        },
        setCheckBox_level_1(data) {
            this.sendDataArr_level_1 = data;
        },
        setCheckBox_level_2(data) {
            this.sendDataArr_level_2 = data;
        },
        // 提交修改
        confirm() {
            let type = true;
            if(this.sendDataArr_level_1.length===0&&this.sendDataArr_level_2.length===0){
                this.$message.warning(this.$t('AddressManagementLang.message1'));
                type=false
            }
            // 是否有空值必选项标识
            if (type && this.confirmTrue) {
                this.confirmTrue = false;
                window.setTimeout(() => {
                    this.confirmTrue = true;
                }, 1000);
                let child_str = this.sendDataArr_level_1.map((obj) => {return '' + obj.uid;}).join(',');
                let son_str = this.sendDataArr_level_2.map((obj) => {return '' + obj.uid;}).join(',');
                let params = new FormData();
                params.append('address', this.address);
                params.append('childMembers', child_str);
                params.append('sonMembers', son_str);
                this.$postForm('saveAddressMember', params).then((res) => {
                    this.confirmTrue = true;
                    if (res.success) {
                        this.$message.success(res.msg);
                        this.$emit('success');
                        this.cancel();
                    }
                });
            }
        },
        //取消修改
        cancel() {
            this.data = {
                code: '',
                type_name: '',
                name_current: '',
            };
            this.tableData_level_1 = [];
            this.sendDataArr_level_1 = [];
            this.$refs.AddressManagement_configure_table_level_1.$refs.tableRef.clearCheckboxRow();
            this.tableData_level_2 = [];
            this.sendDataArr_level_2 = [];
            this.$refs.AddressManagement_configure_table_level_2.$refs.tableRef.clearCheckboxRow();
            this.Visible = false;
            window.removeEventListener('resize', this.setWidth);
            window.removeEventListener('mouseup', this.sum_block_NO);
        },
    }
};
</script>

<style scoped lang="less" >
/deep/ .el-dialog__body{
  height: 100%;
}
.midContant {
    border: 0;
    width: 100%;
    height: calc(100% - 80px);
    .tableBox{
      height: calc(100% - 100px);
    }
}
.dialogBox .dialogBoxItem {
    gap: 10px;
}
.SeekBar {
    cursor: col-resize;
}
.headerBox {
    height: 38px;
    transition: max-height 0.5s ease-out;
    margin-bottom: 15px;
    box-shadow: 0px 0px 2px#ccc;
    background-color: #EBEEF3;
    padding: 3px 10px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #639de3;
}
</style>